<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TLÜ Haapsalu Kolledž - Seadmete laenutus</title>
<link rel="stylesheet" href="css/main_styles.css" type="text/css" media="screen" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="js/jquery.ui.datepicker-et.js"></script>
<script src="js/jquery.autoresize.js"></script>
<script src="js/jquery.colorbox-min.js"></script>

<script type="text/javascript">
	var rentDialog = false;
	var device_ids = new Array();
	
	$(document).ready(function() {
	
	//Set datepicker default locale et_EE
	$.datepicker.setDefaults($.datepicker.regional['et']);
	//Init datepicker for all the inputs with class .date
	$( '.date' ).datepicker();
	
	$( '#user_name' ).autocomplete({
			source: "service.php?service_action=10",
			minLength: 2,
			focus: function( event, ui ) {
				$( "#user_name" ).val( ui.item.name );
				return false;
			},
			search: function( event, ui ) {
				$('#user_id').val( 0 );
			},
			select: function( event, ui ) {
				$('#user_email').val( ui.item.email );
				$('#user_phone').val( ui.item.phone );
				$('#user_id').val( ui.item.id );
				return false;
			}
	}).data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>" + item.name + "</a>" )
				.appendTo( ul );
		};
	
		rentDialog = $('#rent-dialog').dialog({ 
							width: 320,
							minHeight: 260,
							resizable: false,
							modal: true,
							autoOpen: false
						});
	
    	$('#addDeviceLink').bind('click', function() {  
    		$('#add-device').slideToggle('fast');
    		return false;
    	});
    	
    	$('.cancel-edit').each(function() {
    		$(this).bind('click', function( evt ) {
    			evt.preventDefault();
    			var parent = $(this).parent().parent();
    			var id = parent.attr('id').replace('edit-', '');
    			parent.hide();
    			var data_div = $('#data-'+id);
    			data_div.show();
    		});
    	});
    	
    	$('.edit').each(function() {
    		$(this).bind('click', function( evt ) {
    			evt.stopPropagation();
    		});
    	});
    	$('button').each(function() {
    		$(this).bind('mouseenter mouseleave', function() {
    			$(this).toggleClass('ui-state-hover');
    		});
    	});
    	
    	$('#rentOut').bind('click', function(evt) {
    		evt.stopPropagation();
    		rentDialog.dialog('open');
    		var rent_devices_list = $('#rent-devices-list');
    		rent_devices_list.html('');
    		var total_sum = 0;
    		for(var i = 0; i < device_ids.length; i++ ) {
    			$.get('service.php?service_action=9&device-id='+device_ids[i], function(data) {
					rent_devices_list.append('<li><input type="hidden" name="rent_device_ids[]" value="'+data.id+'" /><img src="uploads/'+data.image+'" alt="" style="width: 48px; height:48px;"/> '+data.model+' (S/N:'+data.serial+') - '+data.value+'€</li>');
					total_sum += data.value;
				});
    		}
    	});
    	
    	$('.device-row').each(function() {
    		$(this).bind('click', function(evt) {
    			if($(evt.target).is('img') || $(this).attr('id') == 'add-device') {
    				return true;
    			} 
    			
    			$(this).toggleClass('selected');
    			var id = $(this).attr('id').replace('device-', '');
    			if($(this).hasClass('selected')) {
    				device_ids.push(id);
    			} else {
    				removeFromArray(id);
    			}

    			if( device_ids.length > 0 ) {
    				$('#rentOut').slideDown('fast');
    			} else {
    				$('#rentOut').slideUp('fast');
    			}
    			
    		});
    	});
    	
    	
    	$('img.qr-id').each(function() {
    		$(this).bind('click', function(evt) {
    			return false;
    		});
    		
    		$(this).draggable({
    			axis: 'x',
    			revert: true,
    			revertDuration: 200,
    			start: function(evt, ui) {
    				if ( $('#edit-'+ui.helper.attr('id')).is(':visible') ) {
    					return false;
					}
    				var data_div = $('#data-'+ui.helper.attr('id'));
    				data_div.hide();
    				
    				$('#fader-'+ui.helper.attr('id')).height(data_div.height());
    				$('#fader-'+ui.helper.attr('id')).fadeIn('fast');
    			},
    			stop: function(evt, ui) {
    				$('#fader-'+ui.helper.attr('id')).fadeOut('fast', function() {
    					if ( !$('#edit-'+ui.helper.attr('id')).is(':visible') ) {
	    					$('#data-'+ui.helper.attr('id')).show();
	    				}
    				});
    				ui.helper.removeClass( 'drop-over-green' );
    			}
    		});
    	});
    	
    	$('.delete-device-drop').droppable({
    		tolerance: 'touch',
    		over: function( evt, ui ) {
    			ui.helper.addClass( 'drop-over' );
    		},
    		out: function( evt, ui ) {
    			ui.helper.removeClass( 'drop-over' );
    		},
    		drop: function( evt, ui ) {
				$.get('service.php?service_action=2&device-id='+ui.draggable.attr('id'), function(data) {
					ui.draggable.parent().fadeOut('fast', function() {
						$(this).remove();
					});
				});
    		}
    	});
    	
    	$('.rent-device-drop').droppable({
    		over: function( evt, ui ) {
    			ui.helper.addClass( 'drop-over-green' );
    		},
    		out: function( evt, ui ) {
    			ui.helper.removeClass( 'drop-over-green' );
    		},
    		drop: function( evt, ui ) {
				var id = ui.draggable.attr('id');
				$('#fader-'+id).hide();
    			$('#data-'+id).hide();
    			$('#edit-'+id).show();
    			$('#desc-'+id).data('AutoResizer').check();
    		}
    	});
    	
    	$('.device_desc_edit').autoResize({
    		extraSpace: 0
    	});
    	
    	$('a.device-photo-hook').colorbox({
    		maxHeight: '768',
    		rel: 'device',
    		speed: 350
    	});

    	/*$('form').submit(function() {
    		var id = $(this).find('input[name="device-id"]:first').val();
    		$.post("service.php", $(this).serialize(), function(data) {
				 // location.reload();
				 // alert(data);
			 });
    		return false;
    	});*/
  	});
  	
  	function removeFromArray( id ) {
  		var tmp_array = new Array();
  		for(var i=0; i < device_ids.length; i++) {
  			if( device_ids[i] != id ) {
  				tmp_array.push(device_ids[i]);
  			}
  		}
  		device_ids = tmp_array;
  	}
</script>

<style type="text/css">

.ui-widget {
	font-size: 1em !important;
}
</style>
</head>

<body>

<div id="header_menu" class="padding one-edge-shadow">
<a href="/rent/" class="padding <?php Utils::getActivePageClass( false ); ?>">Kohal <span class="circle"><?php echo $deviceManager->getInStorageCount(); ?></span></a> 
| <a href="?page=out" class="padding <?php Utils::getActivePageClass( 'out' ); ?>">Välja antud <span class="circle"><?php echo $deviceManager->getOutStorageCount(); ?></span></a> | <a href="?page=recent" class="padding <?php Utils::getActivePageClass( 'recent' ); ?>">Hiljutised</a> | <a href="?page=contracts" class="padding <?php Utils::getActivePageClass( 'contracts' ); ?>">Lepingud</a> | <a href="?page=users" class="padding <?php Utils::getActivePageClass( 'users' ); ?>">Rentijad</a>
	<span class="right"><a href="?page=activate_app" class="padding <?php Utils::getActivePageClass( 'activate_app' ); ?>">Rakenduse aktiveerimine</a> | <a href="#" class="padding">Logi välja</a></span>
</div>

<div id="content" class="shadow">

<div id="rent-dialog" style="display:none;" title="Laenutamine">
	<form action="service.php" method="post" enctype="multipart/form-data">
		<input type="hidden" name="service_action" value="7" /> <!-- TODO GET IT FROM CLASS OR SMTHN -->
		<input type="hidden" id="user_id" name="user_id" value="0" />
		<ul id="rent-devices-list">
			<!-- Here will be JS generatd LI elements -->
		</ul>
		

		<input type="text" maxlength="250" id="user_name" autofocus="autofocus" required="required" name="user_name" placeholder="Eesnimi Perenimi" />

		<input type="text" id="user_email" maxlength="250" required="required" name="user_email" placeholder="E-post" />
	
		<input type="text" id="user_phone" maxlength="250" name="user_phone" placeholder="Telefoninumber" />
		<input type="text" maxlength="250" name="return_date" class="date" required="required" autocomplete="off" placeholder="Tagastamine pp.kk.aaaa" />
		<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" style="float:right" aria-disabled="false">
			<span id="device-btn-text" class="ui-button-text">Kinnita</span>
		</button>
	</form>
</div>